<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<style>
			.layui-carousel-ind li {
				display: inline-block;
				width: 15px;
				height: 15px;
				margin: 0 8px;
			}

			/* .layui-carousel-ind {
				top: -90px;
			} */
		</style>
	</head>
	<body>

		<div class="layui-carousel" id="test1" lay-filter="test1">
			<div carousel-item>
				<img src="image/1.png">
				<img src="image/2.png">
				<img src="image/3.png">
				<img src="image/4.png">
				<img src="image/5.png">
			</div>
		</div>
		<!-- 条目中可以是任意内容，如：<img src=""> -->

		<script src="js/jquery.min.js"></script>
		<script src="js/layui/layui.js"></script>
		<script src="js/common.js"></script>
		<script src="js/jquery.cookie.js"></script>

		<script>
			var ins;
			layui.use('carousel', function() {
				var carousel = layui.carousel;
				//建造实例
				ins = carousel.render({
					elem: '#test1',
					full: 'true',
					autoplay:false,
					arrow: 'none' //始终显示箭头
					//,anim: 'updown' //切换动画方式
				});

				//触发轮播切换事件 //test1来源于对应HTML容器的 lay-filter="test1" 属性值
				carousel.on('change(test1)', function(obj) {
					console.log(obj.index); //当前条目的索引
					if(obj.index==0){
						window.location.href="main.html"
					}
				});
			});

			$("#test1").on("touchstart", function(e) {
				var startX = e.originalEvent.targetTouches[0].pageX; //开始坐标X
				$(this).on('touchmove', function(e) {
					arguments[0].preventDefault(); //阻止手机浏览器默认事件
				});
				$(this).on('touchend', function(e) {
					var endX = e.originalEvent.changedTouches[0].pageX; //结束坐标X
					e.stopPropagation(); //停止DOM事件逐层往上传播
					if (endX - startX > 30) {
						ins.slide("sub");
					} else if (startX - endX > 30) {
						ins.slide("add");
					}
					$(this).off('touchmove touchend');
				});
			});
		</script>
	</body>
</html>
